import { useRef, useEffect } from 'react'

const opt = {
  width: window.innerWidth - 180,
  height: window.innerHeight
}

// const vertexShaderSource = `
//   void main(){
//     gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//     gl_PointSize = 10.0;
//   };
// `
const vertexShaderSource = document.querySelector('#vertexShader').innerHTML
console.log("🚀 ~ file: WebGLDemo.js ~ line 15 ~ vertexShaderSource", vertexShaderSource)

// const fragShaderSource = `
//   void main(){
//     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
//   };
// `
const fragShaderSource = document.querySelector('#fragmentShader').innerHTML
console.log("🚀 ~ file: WebGLDemo.js ~ line 23 ~ fragShaderSource", fragShaderSource)



const demo1 = () => {
  const canvasDom = useRef(null)
  const init = () => {
    const canvas = canvasDom.current
    const gl = canvas.getContext('experimental-webgl')
    const vertexShader = gl.createShader(gl.VERTEX_SHADER) // 创建顶点着色器对象
    gl.shaderSource(vertexShader, vertexShaderSource)
    gl.compileShader(vertexShader)

    const fragShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragShader, fragShaderSource)
    gl.compileShader(fragShader)

    const program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragShader)

    gl.linkProgram(program)
    gl.useProgram(program)

    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.POINTS,0,1)
  }
  useEffect(init, [])
  
  return(
    <div>
      <canvas ref={canvasDom} style={{...opt}} ></canvas>
    </div>
  )
}


export {
  demo1
}